<template>
  <div class="home">
    <h2>组件及功能模块展示</h2>
    <div @click="goSlider">轮播图组件</div>
    <div @click="goTaskList">任务清单组件</div>
    <div @click="goRobotOne">选人功能模块</div>
    <div @click="goLogin">登陆组件模板</div>
    <div @click="goSnake">贪吃蛇</div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const goSlider = () => router.push('./slider')
    const goTaskList = () => router.push('/tasklist')
    const goRobotOne = () => router.push('/robotone')
    const goLogin = () => router.push('/login')
    const goSnake = () => {
      window.open('https://ledanger.gitee.io/snake_game/', "_parent")
    }
    return {
      goSlider,
      goTaskList,
      goRobotOne,
      goLogin,
      goSnake
    }
  }
}
</script>

<style scoped>
   .home {
     display: flex;
     flex-direction: column;
   }
   .home>div {
     width: 120px;
     height: 120px;
     border: 1px solid black;
     text-align: center;
     line-height: 120px;
     cursor: pointer;
     background-color: #bfa;
     margin: 10px;
     box-shadow: 0 0 2px red;
   }
   .home>div:hover {
     background-color: #ae9;
   }
</style>